Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to style tables with Bootstrap 5.
Tables without Borders
We can create a table without borders with the .table-borderless class:
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
It also works with other variants:
<table class="table table-dark table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Small Tables
We can use the .table-sm class to make a table more compact by reducing the padding in half:
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
This also works with other table variants:
<table class="table table-dark table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Vertical Alignment
The vertical alignment of tables can be changed with Bootstrap 5 classes.
They can be changed in cells, tables, or table rows:
<table class="table table-sm table-dark">
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr class="align-bottom">
...
</tr>
<tr>
<td>...</td>
<td class="align-top">aligned to the top.</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
</table>
We have the align-top , align-middle , and align-bottom classes to make the alignments.
Nesting
Border styles, active styles, and table variants aren’t inherited by nested tables.
For example, we can write:
<table class="table table-striped">
<thead>
<tr class="align-bottom">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<td colspan="4">
<table class="table align-bottom">
<thead>
<tr class="align-bottom">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
to apply styles to nested tables.
The styles have to be applied to each table individually.
Table Head
We can use the .table-light or .table-dark classes to make the thead appear light or dark gray.
For example, we can write:
<table class="table">
<thead class="table-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
to make the table heading light gray.
We can make it dark gray with the table-dark class:
<table class="table">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Table Foot
We can add a footer to a table with the tfoot element.
For example, we can write:
<table class="table">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>footer</th>
<td>footer</td>
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
</table>
to add a footer.
Captions
We can add the caption tag to add a caption to label the table.
For example, we can write:
<table class="table">
<caption>List of people</caption>
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>footer</th>
<td>footer</td>
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
</table>
to add a label to the bottom of the table.
Conclusion
We can add tables with various styles.
Nested tables have to have styles applied to them individually.
